{% extends 'sales/base.html' %}
{% load static %}
{% load thumbnail %}
{% block breadcrumb %}

{% block extralinks %}
<link rel="stylesheet" href="{% static 'css/bootstrap-suggest.css' %}">
<style>
  .opacity_block {
    opacity: 0.2;
  }
  label {
    font-weight: 600;
    color: black;
  }
</style>
{% endblock extralinks %}


<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'accounts:list' %}">Accounts</a></li>
    <li class="active breadcrumb-item">{{account_record.name}}</li>
  </ol>
</nav>
{% endblock breadcrumb %}
{% block content %}

<div class="main_container" id="maincontainer">
  <div class="overview_form_block row marl justify-content-center" id="opacity_block">
    <div class="col-md-8" id="opacity_block">
      <div class="card">
        <div class="card-body" id="datashow">
          <div class="card-title text-right">
            <h5>
              <span class="float-left title">Overview</span>
              <span style="margin-top: 0px">
                <div class="dropdown buttons_row" style="width:auto; display:inline-block; left:0">
                  <button class="btn primary_btn dropdown-toggle" type="button" data-toggle="dropdown">Actions
                    <span class="caret"></span></button>
                  <ul class="dropdown-menu" style="width:fit-content; min-width:-webkit-fill-available; margin-top: 0;">
                    <li><a href="{% url 'accounts:edit_account' account_record.id %}"
                        style="background:#17a2b8; color: white; font-weight: 600;">Edit</a></li>
                  </ul>
                </div>
              </span>
            </h5>
          </div>
          <div class="row marl">
            <div class="col-md-4">
              {% if account_record.name %}
              <div class="filter_col col-md-12" id="iname">
                <div class="form-group">
                  <label class="acc_field_label" for="id_name" data-name="name">Name</label>
                  <div class="account_field" id="account_name" data-name="name">{{ account_record.name }}</div>
                </div>
              </div>
              {% endif %}
              {% if account_record.phone %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_phone" data-name="name">Phone</label>
                  <div class="account_field" id="account_phone" data-name="name">{{ account_record.phone }}</div>
                </div>
              </div>
              {% endif %}
              {% if account_record.status %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_status" data-name="name">Status</label>
                  <div class="account_field" id="account_status" data-name="name">{{ account_record.status }}</div>
                </div>
              </div>
              {% endif %}
            </div>
            <div class="col-md-4">
              {% if account_record.email %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_email" data-name="name">Email</label>
                  <div class="account_field" id="account_email" data-name="name">{{ account_record.email }}</div>
                </div>
              </div>
              {% endif %}
              {% if account_record.website %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_website" data-name="name">Website</label>
                  <div class="account_field" id="account_website" data-name="name">{{ account_record.website }}</div>
                </div>
              </div>
              {% endif %}
              {% if account_record.contacts.all %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_website" data-name="name">Contacts</label>
                  {% for contact in account_record.contacts.all %}
                  <div class="account_field" id="account_website" data-name="name">{{ contact }}</div>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
              {% if account_record.lead %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_website" data-name="name">lead</label>
                  <div class="account_field" id="account_website" data-name="name">{{ account_record.lead }}</div>
                </div>
              </div>
              {% endif %}
            </div>
            <div class="col-md-4">
              {% if account_record.billing_address_line or account_record.billing_street or  account_record.billing_city or   account_record.billing_state or account_record.billing_postcode or account_record.billing_country %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_billing_address" data-name="name">Billing Address</label>
                  <div class="account_field" id="account_billing_address" data-name="name">
                    {{account_record.get_complete_address}}
                  </div>
                </div>
              </div>
              {% endif %}
              <div class="filter_col col-md-12">
                {% if account_record.assigned_to.all %}
                <div class="form-group">
                  <label class="case_field_label" for="id_contact" data-name="name">Assigned To</label>
                  <div class="case_field" id="case_contact" data-name="name">
                    {% for user in account_record.assigned_to.all %}
                    <div>
                      <a href="{% url 'common:view_user' user.id %}">{{user}}</a>
                    </div>
                    {% endfor %}
                  </div>
                </div>
                {% endif %}
              </div>
              {% if account_record.description %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_description" data-name="name">Description</label>
                  <div class="account_field" id="account_description" data-name="name">{{ account_record.description }}
                  </div>
                </div>
              </div>
              {% endif %}
              {% if account_record.tags.all %}
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label class="acc_field_label" for="id_tags" data-name="name">Tags</label>
                  <div class="account_field" id="account_tags" data-name="name">
                    {% for tag in account_record.tags.all %}
                    <span class="text-left" id="list_tag">{{ tag.name }}</span>
                    {% endfor %}
                  </div>
                </div>
              </div>
              {% endif %}
            </div>
            <div class="col-md-12">
              <div class="created_information">
                Created by <b>{{ account_record.created_by }}</b> created on
                <b title="{{ account_record.created_on }}">{{ account_record.created_on_arrow }}</b>
              </div>
            </div>
            <div class="col-md-12 " style="padding:0">
              
              <div class="card-body mar-top" id="datashow">
                <div class="card-title view-pad">
                  <h5>Attachments</h5>
                </div>
                <div class="row marl">
                  <div class="col-md-12">
                    <form id="attachment_form" method="POST" enctype="multipart/form-data">
                      <div class="form-group ">
                        <input type="file" class="form-control-file" cols="40" id="id_attachments" name="attachment">
                        <div>
                          <p id="AttachmentError" style="display:none; color:red"></p>
                        </div>
                        <br>
                        <div class="buttons_row">
                          <button class="btn btn-default save" style="text-align: center;"
                            id="attachment_submit">Save</button>
                        </div>
                      </div>
                      <input type="hidden" value="{{account_record.id}}" name="accountid">
                    </form>
                    <ul class="list-group" id="attachment_div">
                      {% for attachment in attachments %}
                      <li class="list-group-item list-row" id="attachment{{attachment.id}}">
                        {% if request.user.is_superuser or request.user.role == 'ADMIN' or request.user == attachment.created_by %}
                        <div class="float-right right-container">
                          <div class="list-row-buttons btn-group float-right">
                            <button class="action btn primary_btn"
                              onclick="remove_attachment({{attachment.id}})">Remove</button>
                          </div>
                        </div>
                        {% endif %}
                        <div class="stream-post-container" id="attachment_name{{attachment.id}}">
                          {% if attachment.attachment %}
                          {% if 'image' in attachment.file_type %}
                          {% thumbnail attachment.attachment "80x80" crop="center" as im %}
                          <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="mb-2">
                          {% endthumbnail %}
                          {% endif %}
                          {% endif %}
                          <pre> <span class="icon"><i style="font-size:1.5rem;" class="{{attachment.get_file_type_display}}"></i> </span>{{attachment.file_name}} <a href="{% url 'common:download_attachment' attachment.id %}">Download</a></pre>
                        </div>
                        <div class="stream-container">
                          <pre class="float-left">Uploaded by :{{ attachment.created_by }}</pre>
                          <pre class="float-right date"
                            title="{{ attachment.created_on }}">{{ attachment.created_on_arrow }}</pre>
                        </div>
                      </li>
                      {% endfor %}
                    </ul>
                  </div>
                </div>
              </div>
              
              
              <div class="card-body" id="datashow">
                <div class="card-title">
                  <h5>Comments</h5>
                </div>
                <div class="row marl">
                  <div class="col-md-12">
                    <form id="comment_form" method="POST" enctype="multipart/form-data">
                      <div class="form-group">
                        <textarea class="form-control mentions" textarea cols="40" rows="3" id="id_comments"
                          name="comment" placeholder="Submit Your Comments Here"></textarea>
                        <div>
                          <p id="CommentError" style="display:none; color:red"></p>
                        </div>
                        </br>
                        <div class="buttons_row">
                          <button class="btn btn-default save" style="text-align: center;" id="comment_submit"
                            type="submit">Submit</button>
                        </div>
                      </div>
                      <input type="hidden" value="{{ account_record.id }}" name="accountid">
                    </form>
                    <ul class="list-group" id="comments_div">
                      {% for comment in comments %}
                      <li class="list-group-item list-row" id="comment{{comment.id}}">
                        {% if request.user.is_superuser or request.user.role == 'ADMIN' or request.user == comment.commented_by %}
                        <div class="list-row-buttons btn-group float-right">
                          <button class="btn primary_btn btn-sm dropdown-toggle" data-toggle="dropdown"
                            type="button">Actions<span class="caret"></span></button>
                          <ul class="dropdown-menu text-center"
                            style="width: fit-content; min-width: -webkit-fill-available;">
                            <li>
                              <a class="action" onclick="edit_comment({{comment.id}})"
                                style="padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;">Edit</a>
                            </li>
                            <li>
                              <a class="action" onclick="remove_comment({{comment.id}})"
                                style="padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;">Remove</a>
                            </li>
                          </ul>
                        </div>
                        {% endif %}
                        <div class="stream-post-container" id="comment_name{{comment.id}}">
                          <pre>{{ comment.comment }}</pre>
                        </div>
                        <div class="stream-container">
                          <pre class="float-left">{{ comment.commented_by }}</pre>
                          <pre class="float-right date"
                            title="{{ comment.commented_on }}">{{ comment.commented_on_arrow }}</pre>
                        </div>
                      </li>
                      {% endfor %}
                    </ul>
                  </div>
                </div>
                <div class="modal fade" id="Comments_Accounts_Modal" role="dialog" data-keyboard="false"
                  data-backdrop="static">
                  <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title">Update Your Comment</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>
                      </div>
                      <form id="comment_edit_form" method="POST">
                        <div class="modal-body">
                          <div class="form-group">
                            <textarea class="form-control mentions" textarea cols="40" rows="3" id="id_editcomment"
                              name="comment" placeholder="Submit Your Comments" style="color:black;"></textarea><span>
                              <p id="CommentEditError" style="display:none; color:red"></p>
                            </span>
                            <input type="hidden" value="{{ account.id }}" name="accountid">
                            <input type="hidden" value="" name="commentid" id="commentid">
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-default save" id="comment_edit" type="submit">Update</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
              </div>

              
            </div>
          </div>
        </div>
      </div>
      <br>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Contacts
                  <a href="{% url 'contacts:add_contact' %}?view_account={{account_record.id}}"><span
                      class="fa fa-plus pull-right" style="color:black;"></span></a>
                  {% if contacts|length > 0 %}
                  
                  </a>
                  {% endif %}
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if contacts|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="25%" style="text-align:center;">Contact Name</th>
                        <th width="20%" style="text-align:center;">Phone</th>
                        <th width="25%" style="text-align:center;">Email</th>
                        <th width="25%" style="text-align:center;">Actions</th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for contact in contacts %}
                      <tr id="contacts_details{{contact.id}}" class="text-center">
                        <td class="text-center" scope="row">{{ forloop.counter }}</td>
                        <td class="text-center">{{ contact.first_name }} {{ contact.last_name }}</td>
                        <td class="text-center">{{ contact.phone }}</td>
                        <td class="text-center">{{ contact.email }}</td>
                        <td class="actions text-center">
                          <a href="{% url 'contacts:view_contact' pk=contact.id %}" class="btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'contacts:edit_contact' pk=contact.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'contacts:remove_contact' pk=contact.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal contacts|length 0 %}
                <h6 class="text-center">No Contact Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Opportunities
                  <a href="{% url 'opportunity:save' %}?view_account={{account_record.id}}"><span
                      class="fa fa-plus pull-right" style="color:black;"></span></a>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if opportunity_list|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">Name</th>
                        <th width="20%" style="text-align:center;">Stage</th>
                        <th width="20%" style="text-align:center;">Probability</th>
                        <th width="25%" style="text-align:center;">Actions </th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for opportunity in opportunity_list %}
                      <tr id="opp_details{{opportunity.id}}" class="text-center">
                        <td scope="row" class="text-center">{{ forloop.counter }}</td>
                        <td class="text-center">{{opportunity.name}}</td>
                        <td class="text-center">{{opportunity.stage}}</td>
                        <td class="text-center">{{opportunity.probability}} {% if opportunity.probability %} %
                          {% endif %}</td>
                        <td class="actions text-center">
                          <a href="{% url 'opportunities:opp_view' pk=opportunity.id %}" class="btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'opportunities:opp_edit' pk=opportunity.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'opportunities:opp_remove' pk=opportunity.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal opportunity_list|length 0 %}
                <h6 class="text-center">No Opportunity Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad ">
                  Cases
                  <a href="{% url 'cases:add_case' %}?view_account={{account_record.id}}"><span
                      class="fa fa-plus pull-right" style="color:black;"></span></a>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if cases|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">Name</th>
                        <th width="20%" style="text-align:center;">Status</th>
                        <th width="20%" style="text-align:center;">Priority</th>
                        <th width="25%" style="text-align:center;">Actions</th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for case in cases %}
                      <tr id="cases_details{{case.id}}" class="text-center">
                        <td scope="row" class="text-center">{{ forloop.counter }}</td>
                        <td class="text-center">{{ case.name }}</td>
                        <td class="text-center">{{ case.status }}</td>
                        <td class="text-center">{{ case.priority }}</td>
                        <td class="actions text-center">
                          <a href="{% url 'cases:view_case' pk=case.id %}" class="text-center btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'cases:edit_case' pk=case.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'cases:remove_case' case_id=case.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal cases|length 0 %}
                <h6 class="text-center">No Case Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Tasks
                  <a href="{% url 'tasks:task_create' %}?view_account={{account_record.id}}"><span
                      class="fa fa-plus pull-right" style="color:black;"></span></a>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if tasks|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">Title</th>
                        <th width="20%" style="text-align:center;">Status</th>
                        <th width="20%" style="text-align:center;">Priority</th>
                        <th width="25%" style="text-align:center;">Actions </th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for task in tasks %}
                      <tr id="task_{{task.id}}" class="text-center">
                        <td class="text-center" scope="row">{{ forloop.counter }}</td>
                        <td class="text-center">{{task.title}}</td>
                        <td class="text-center">{{task.status}}</td>
                        <td class="text-center">{{task.priority}} {% if task.probability %} % {% endif %}</td>
                        <td class="actions text-center">
                          <a href="{% url 'tasks:task_detail' task.id %}" class="btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'tasks:task_edit' task.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'tasks:task_delete' task.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal tasks|length 0 %}
                <h6 class="text-center">No tasks Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>
      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Invoices
                  <a href="{% url 'invoices:invoices_create' %}?view_account={{account_record.id}}"><span
                      class="fa fa-plus pull-right" style="color:black;"></span></a>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if invoices|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">Title</th>
                        <th width="20%" style="text-align:center;">Email</th>
                        <th width="20%" style="text-align:center;">Status</th>
                        <th width="25%" style="text-align:center;">Actions </th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for invoice in invoices %}
                      <tr id="invoice_{{invoice.id}}" class="text-center">
                        <td class="text-center" scope="row">{{ forloop.counter }}</td>
                        <td class="text-center">{{invoice.invoice_title}}</td>
                        <td class="text-center">{{invoice.email}}</td>
                        <td class="text-center">{{invoice.status}} {% if task.probability %} % {% endif %}</td>
                        <td class="actions text-center">
                          <a href="{% url 'invoices:invoice_details' invoice.id %}" class="btn btn-primary"
                            style="color: white;">View</a>
                          <a href="{% url 'invoices:invoice_edit' invoice.id %}?view_account={{account_record.id}}"
                            class="btn btn-success">Edit</a>
                          <a href="{% url 'invoices:invoice_delete' invoice.id %}?view_account={{account_record.id}}"
                            class="btn btn-danger">Remove</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal invoices|length 0 %}
                <h6 class="text-center">No invoices Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>

      <form method='GET' class="accountdetails_row">
        <div class="table_container_row row marl no-gutters">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body">
                <div class="panel-heading-list card-title view-pad">
                  Sent Mails
                  <a href="#"><span></span></a>
                </div>
                <div class="table-responsive">
                  <table class="table table-bordered table-striped table-condensed">
                    {% if emails|length > 0 %}
                    <thead>
                      <tr>
                        <th width="5%" style="text-align:center;">S.No</th>
                        <th width="30%" style="text-align:center;">From mail</th>
                        <th width="20%" style="text-align:center;">Contact</th>
                        <th width="20%" style="text-align:center;">Subject</th>
                        <th width="25%" style="text-align:center;">Created On </th>
                        <th width="25%" style="text-align:center;">View </th>
                      </tr>
                    </thead>
                    {% endif %}
                    <tbody>
                      {% for email in emails %}
                      <tr id="invoice_{{invoice.id}}" class="text-center">
                        <td class="text-center" scope="row">{{ forloop.counter }}</td>
                        <td class="text-center">{{email.from_email}}</td>
                        <td class="text-center">{{email.recipients.count}}</td>
                        <td class="text-center">{{email.message_subject}}</td>
                        <td class="text-center">{{email.created_on}}</td>
                        <td class="text-center">
                          <a href="#" class="btn btn-primary get_email_info" style="color: white;" data-toggle="modal"
                            data-target="#email_info_ajax" data-account="{{email.id}}">View</a>
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
                {% ifequal emails|length 0 %}
                <h6 class="text-center">No Emails Records Found</h6>
                {% endifequal %}
              </div>
            </div>
            <br clear="all">
          </div>
        </div>
      </form>

    </div>
    <div class="overview_form_block row marl justify-content-center" id="loading_spinner"
      style="z-index: 10; left: 0; right: 0; vertical-align: middle; position: absolute; margin-top: 15%;">

      <div class="spinner-border text-primary" style="width: 5em; height: 5em;" role="status">
        <span class="sr-only">Processing File...</span>
      </div>
    </div>
  </div>
</div>



<div class="modal fade bd-example-modal-lg" id="email_info_ajax" tabindex="-1" role="dialog"
  aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="" id="">
        <div class="" style="padding: 1em;">
          <div class="col-md-12">
            <div class="card" style="padding: 1em;">
              <div class="card-body" id="datashow" style="margin: 0; padding: 0;">
                <div class="row marl no-gutters">
                  <div class="col-md-12">
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label class="contact_field_label" for="id_title" data-name="title">Subject</label>
                        <div class="contact_field" id="mail_subject" data-name="name"> </div>
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label class="contact_field_label" for="id_status" data-name="status">Body</label>
                        <div class="contact_field" id="mail_body" data-name="status"> </div>
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label class="contact_field_label" for="id_status" data-name="status">Contacts</label>
                        <div class="contact_field" id="mail_contacts" data-name="status"> </div>
                      </div>
                    </div>
                    <div class="filter_col col-md-12">
                      <div class="form-group">
                        <label class="contact_field_label" for="id_created_on" data-name="created_on">Created
                          On</label>
                        <div class="contact_field" id="mail_created_on" data-name="created_on">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock content %}
{% block js_block %}

<script type="text/javascript">
  $('#loading_spinner').hide()


  $("#comment_form").submit(function (e) {
    e.preventDefault()
    var formData = new FormData($("#comment_form")[0]);
    $.ajax({
      url: "{% url 'accounts:add_comment' %}",
      type: "POST",
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function (data) {
        if (data.error) {
          $("#CommentError").html(data.error).show()
        } else {
          d = new Date(data.commented_on);
          let options = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          };
          d = d.toLocaleString('en-us', options);
          $("#comments_div").prepend("<li class='list-group-item list-row' id='comment" + data.comment_id + "'>" +
            "<div class='float-right right-container'>" +
            "<div class='list-row-buttons btn-group float-right'>" +
            "<button class='btn primary_btn btn-sm dropdown-toggle' data-toggle='dropdown' type='button'><span class='caret'></span>Actions</button>" +
            "<ul class='dropdown-menu text-center' style='width: fit-content; min-width: -webkit-fill-available;'>" +
            "<li><a class='action' style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;' onclick='edit_comment(" + data.comment_id + ")'>Edit</a></li>" +
            "<li><a class='action' style='padding: 0.5em; background: #17a2b8; color:white; font-weight: 600;' onclick='remove_comment(" + data.comment_id + ")''>Remove</a></li></ul></div></div>" +
            "<div class='stream-post-container' id='comment_name" + data.comment_id + "'><pre>" + data.comment + "</pre></div>" +
            "<div class='stream-container'><pre class='float-left'>" + data.commented_by + "</pre><pre class='float-right' title='" + d + "'>" + data.commented_on_arrow + "</pre></div>"
          )
          $("#id_comments").val("")
          alert("Comment Submitted")
          $("#CommentError").html("")
        }
      }
    });
  });

  function edit_comment(x) {
    $('#Comments_Accounts_Modal').modal('show');
    comment = $("#comment_name" + x).text()
    $("#commentid").val(x)
    $("#id_editcomment").val(comment)
    $("#edit_file_field").html($("#comment_file_div" + x).clone())
  }

  $("#comment_edit").click(function (e) {
    e.preventDefault()
    var formData = new FormData($("#comment_edit_form")[0]);
    $.ajax({
      url: "{% url 'accounts:edit_comment' %}",
      type: "POST",
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      success: function (data) {
        if (data.error) {
          $("#CommentEditError").html(data.error).show()
        } else {
          console.log($("#comment_name" + data.comment_id))
          $("#comment_name" + data.comment_id).html('<pre>' + data.comment + '</pre>')
          $('#Comments_Accounts_Modal').modal('hide');
          $("#id_editcomment").val("")
          $("#CommentEditError").html('')
        }
      }
    })
  })

  /*Comment Edit Js Ends*/

  function HideError(e) {
    $("#CommentError").hide()
    $("#CommentEditError").hide()
  }

  /*Comment Remove Js Start*/

  function remove_comment(x) {
    var con = confirm("Do you want to Delete it for Sure!?")
    if (con == true) {
      $.post('{% url "accounts:remove_comment" %}', {
        "comment_id": x
      }, function (data) {
        if (data.error) {
          alert(data.error)
        } else {
          $("#comment" + data.cid).remove()
        }
      })
    }
  }

  function remove_attachment(x) {
    const con = confirm("Do you want to Delete it for Sure!?");
    if (con == true) {
      $.post('{% url "leads:remove_attachment" %}', {
        "attachment_id": x
      }, function (data) {
        if (data.error) {
          alert(data.error)
        } else {
          $("#attachment" + data.aid).remove()
        }
      })
    }
  }

  $("#attachment_form").submit(function (e) {
    e.preventDefault()
    const formData = new FormData($("#attachment_form")[0]);
    $.ajax({
      url: "{% url 'accounts:add_attachment' %}",
      type: "POST",
      data: formData,
      cache: false,
      contentType: false,
      processData: false,
      beforeSend: function () {
        $('#loading_spinner').show()
        $('#opacity_block').addClass('opacity_block')
      },
      success: function (data) {
        if (data.error) {
          $("#AttachmentError").html(data.error).show()
          $('#loading_spinner').hide()
          $('#opacity_block').removeClass('opacity_block')
        } else {
          d = new Date(data.created_on)
          let options = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          };
          d = d.toLocaleString('en-us', options);
          $("#attachment_div").prepend(
            "<li class='list-group-item list-row' id='attachment" + data.attachment_id + "'>" +
            "<div class='float-right right-container'><div class='list-row-buttons btn-group float-right'><button class='action btn primary_btn' onclick='remove_attachment(" + data.attachment_id + ")''>Remove</button></div></div>" +
            "<div class='stream-post-container' id='attachment_name" + data.attachment_id + "'>" +
            `${(data.file_type[0]).startsWith('image') ? `<img src=${data.attachment_url} width="80px" height="80px" class="mb-2">` : ''}` +
            "<pre><span class='icon'><i style='font-size:1.5rem;' class='" + data.attachment_display + "'></i>&nbsp;&nbsp;</span>" + data.attachment + "&nbsp; &nbsp;<a href='" + data.download_url + "'>Download</a></pre></div>" +
            "<div class='stream-container'><pre class='float-left'>" + data.created_by + "</pre><pre class='float-right date' title='" + d.toLocaleString('en-US', { hour12: true }) + "'>" + data.created_on_arrow + "</pre></div>" +
            "</li>"
          )
          $("#AttachmentError").html("")
          $("#id_attachments").val("")
          $('#loading_spinner').hide()
          $('#opacity_block').removeClass('opacity_block')
          setTimeout(() => {
            alert("Attachment Saved")
          }, 100);
        }
      }
    })
  });

</script>
<script src="{% static 'js/bootstrap-suggest.js' %}"></script>
<script>
  $('.mentions').suggest('@', {
    data: {{ users_mention| safe}},
    map: function (user) {
      return {
        value: user.username,
        text: '<strong>' + user.username + '</strong>'
      }
    }
})
</script>
<script>
  $('.get_email_info').click(function (e) {
    var email_account_id = $(this).attr('data-account')
    $.ajax({
      url: "{% url 'accounts:get_email_data_for_account' %}",
      type: "POST",
      dataType: 'json',
      data: { 'email_account_id': email_account_id, },
      success: function (data) {
        if (data.error) {
          alert('No Data found.')
        } else {

          $('#mail_subject').html(data.subject);
          $('#mail_body').html(data.body);
          d = new Date(data.created_on)
          let options = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          };
          d = d.toLocaleString('en-us', options);
          $('#mail_created_on').html(d);
          // $('#mail_emails').html(data.contacts);
          if (data.contacts.length >= 1) {
            var contacts = data.contacts.map((value) => `<p>
              ${value.email}
              </p>`)
            $('#mail_contacts').html(contacts);

          }
        }
      }
    })
  })

  // $('#email_info_ajax').on('hidden.bs.modal', function () {
  //   // $('#mail_subject').html('');
  //   // $('#mail_body').html('');
  //   // $('#mail_emails').html('');
  //   // do something…
  // })


</script>
{% endblock js_block %}